<template>
	<view class="uni-popup-share">
		<view class="uni-share-title"><text class="uni-share-title-text">{{title}}</text></view>
		<view class="uni-share-content">
			<view class="uni-share-content-box">
				<view class="top">
					<text class="text-red">本节价格：10春卷</text>
					<text>余额:100春卷</text>
				</view>
				<view class="butm">
					<button type="warn" class="shopThisPage"
					@tap="shopPage">购买本章</button>
				</view>
				<text class="shopAll" >批量购买章节</text>
			</view>
		</view>
		<view class="uni-share-button-box">
			<button class="uni-share-button" @click="close">取消</button>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'UniPopupShare',
		props: {
			title: {
				type: String,
				default: '需要购买后阅读'
			},
			Bookid:{
				type:Number,
			}
		},
		inject: ['popup'],
		data() {
			return {
				
			}
		},
		created() {
		},
		methods: {
			/**
			 * 关闭窗口
			 */
			close() {
				this.popup.close()
			},
			shopPage(){
				uni.navigateTo({
					url:'/pages/reader/shopPage?id=' +this.Bookid
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.uni-popup-share {
		background-color: #fff;
	}
	.uni-share-title {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 40px;
	}
	.uni-share-title-text {
		font-size: 14px;
		color: #666;
	}
	.uni-share-content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		padding-top: 10px;
		
	}
	
	.uni-share-content-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		flex-wrap: wrap;
		align-items: center;
		width: 360px;
	}
	
	.uni-share-content-item {
		width: 90px;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		padding: 10px 0;
		align-items: center;
	}
	
	.uni-share-content-item:active {
		background-color: #f5f5f5;
	}
	
	.uni-share-image {
		width: 30px;
		height: 30px;
	}
	
	.uni-share-text {
		margin-top: 10px;
		font-size: 14px;
		color: #3B4144;
	}
	
	.uni-share-button-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 10px 15px;
	}
.top{
	font-size: 12px;
}
.text-red{
	color: red;
	padding-right: 8px;
}
.butm{
	margin: 10px 0 10px 0;
	width: 26vh;
}
.shopThisPage{
	font-size: 12px;
	padding: 4px;
	border-radius: 15px;
}
.shopAll{
	font-size: 12px;
}

</style>
